<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用weakSet实现todo列表</title>
</head>
<style>
	*{
		list-style-type: none;
		padding:0;
		margin:0;
		text-decoration: none;
	}
	ul{
		width: 200px;
		margin: 10px;
	}
	li{
		width: 100%;
		height: 40px;
		margin-bottom: 5px;
		border: 1px solid orange;
	}
	li p{
		width:160px;
		height: 40px;
		line-height: 40px;
		float: left;
	}
	li a{
		width:40px;
		height: 40px;
		line-height: 40px;
		float: left;
		font-size: 28px;
		text-align: center;
		cursor: pointer;
		background-color: skyblue;
	}
	.remove{
		background-color: #999;
		opacity: 0.4;
	}
</style>
<body>
	<ul>
		<li>
			<p>wwww.baidu.com</p>
			<a href="javaScript:void(0)">-</a>
		</li>
		<li>
			<p>wwww.souhu.com</p>
			<a href="javaScript:void(0)">-</a>
		</li>
		<li>
			<p>chaojikeji.com</p>
			<a href="javaScript:void(0)">-</a>
		</li>
	</ul>
</body>

<script>
	class todo{
		constructor(){
			this.lis = document.querySelectorAll('ul>li');
			// console.log(this.lis)
			this.weakSet = new WeakSet();
			this.lis.forEach((item)=>{
				this.weakSet.add(item)
			})
			// console.log(this.weakSet)
		};

		run(){
			this.addEvent();
		};

		addEvent(){
			this.lis.forEach(item=>{
				var a = item.querySelector("a");
				var that = this;
				a.addEventListener("click",function(event){
					let parentEle = event.target.parentElement;
					// console.log(parentEle)
					if (that.weakSet.has(parentEle)) {
						 parentEle.classList.add("remove");
						 a.innerHTML = "+";
						 that.weakSet.delete(parentEle)
					}else{
						parentEle.classList.remove("remove");
						 a.innerHTML = "-";
						 that.weakSet.add(parentEle)
					}

				})
			})
		}





	}




	var Todo = new todo();
	Todo.run()




</script>
</html>